<!-- Created by henian.xu on 2018/8/24. -->

<template>
    <Page :title="pageTitle">
        <Container>
            <Button
                to="/component/button"
            >
                <div
                    class="inner"
                    slot="inner"
                >
                    <div class="text">component</div>
                    <div class="sub-label">button</div>
                </div>
            </Button>
            <Button
                label="label"
                subLabel="sub label"
                icon="&#xf003;"
                innerClass="ta-l"
                @click="onBtnClick"
            />
            <Button
                label="label"
                @click="onBtnClick"
            />
            <div class="pa-a">
                <Button
                    v-for="(item,index) in ['super','more','big','normal','small','mini']"
                    :key="index"
                    :size="item"
                    :label="item"
                    radius="all"
                    theme="main"
                ><i class="f-icon">&#xf003;</i>{{ item }}</Button>
            </div>

            <CellGroup>
                <Cell
                    icon="&#xf003;"
                    label="label"
                    sub-label="sub label"/>
                <Cell
                    icon="&#xf003;"
                    label="label"/>
                <Cell
                    icon="&#xf003;">
                    <div
                        class="inner"
                        slot="inner">
                        <div class="label">component</div>
                        <div class="sub-label">button</div>
                    </div>
                </Cell>
                <Cell
                    icon="&#xf009;"
                    label="label"
                    sub-label="sub label"
                >
                    <i
                        class="f-icon" 
                    >&#xf005;</i>
                    <!--<div
                        class="text"
                        slot="text"
                    >component</div>-->
                    <div
                        class="sub-label"
                        slot="subLabel"
                    >sub label</div>
                </Cell>
            </CellGroup>
        </Container>
    </Page>
</template>

<script>
import pageMixin from '@/mixins/page';

export default {
    name: 'Index',
    mixins: [pageMixin],
    data() {
        return {};
    },
    methods: {
        onBtnClick(e) {
            console.log('onBtnClick', e);
        },
    },
};
</script>

<style lang="scss">
</style>
